<!DOCTYPE html>
<html>
<head>
  <title>旅游网站</title>
  <link rel="stylesheet" href="bootstrap-4.5.0-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <style>
    /* 头部样式 */
    .header {
      background-color: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }

    /* 导航栏样式 */
    /* .navbar {
      background-color: #333;
      overflow: hidden;
    } */

    .navbar a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .navbar a:hover {
      background-color: #ddd;
      color: black;
    }

    /* 下拉菜单样式 */
    .dropdown {
      float: left;
      overflow: hidden;
    }

    .dropdown .dropbtn {
      font-size: 17px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }

    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: #ddd;
      color: black;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 200px;
      height: 100%;
      background-color: #f1f1f1;
      position: fixed;
      overflow: auto;
    }

    .sidebar a {
      display: block;
      color: black;
      padding: 16px;
      text-decoration: none;
    }

    .sidebar a:hover {
      background-color: #ddd;
    }

    @media screen and (max-width: 576px) {
      .sidebar {
        display: none;
      }
    }
    @media screen and (max-width:576px){
        .footer{
            position: absolute;
    top: 0;
    right: 0;
    transform: rotate(90deg); /* 旋转90度 */
    transform-origin: top right; /* 以右上角为旋转中心 */
    width: 100vh; /* 使用视口高度作为宽度 */
    height: 100px; /* 设置旋转后的高度 */
        }
    }

    /* 文章样式 */
    .content {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-gap: 20px;
      margin-left: 200px;
      padding: 20px;
    }

    .article {
      max-width: 100%;
      border: 1px solid #ddd;
      padding: 20px 10px;
    }

    /* 页脚样式 */
    footer {
      background-color: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }

    /* 轮播图样式 */
    .slideshow-container {
      max-width: 100%;
      position: relative;
      margin: auto;
    }

    .slideshow-container img {
      width: 100%;
      height: auto;
    }

    .slideshow-container .slide {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
    }

    .slideshow-container .slide.active {
      display: block;
    }
    .modal{
      display: none;
      margin: auto;
      padding-top: 5%;
      width: 50%;
      height: 80%;
      z-index: 1;
      background-color: white;
    }
    .modal img{
      display: block;
      padding: 10px;
      margin: 0 auto;
      max-width: 100%;
      max-height: 100%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2),0 10px rgba(0,0,0,0.2);
 border-radius: 12px;
 border: 1px solid white;
    }
    .box{
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="header">
    <h1>旅游网站</h1>
        </div>
  <nav class="navbar navba-expand-sm bg-dark navbar-dark">
                      
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navtop">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navtop"></div>
<ul class="nav nav-pills">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">首页</a>
<ul class="dropdown-menu">
<li><a href="#">登录</a>
</li>
<li>
<a href="#">注册</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu1" class="nav-link" data-toggle="tab">每日一图</a>
</li>
<li class="nav-item">
<a href="#menu2" class="nav-link" data-toggle="tab">文章分类</a>
</li>
<li class="nav-item">
    <a href="#menu1" class="nav-link" data-toggle="tab">每日一图</a>
    </li>
</ul>
<!-- <div class="tab-content">
<div class="tab-pane active container" id="home">我是首页</div>
<div class="tab-pane container" id="menu1">我是表体</div>
<div class="tab-pane container" id="menu2">我是标题2</div>
</div> -->
<script src="bootstrap-4.5.0-dist/js/jquery-3.5.1.slim.min.js"></script>
<script src="bootstrap-4.5.0-dist/js/popper.min.js"></script>
<script src="bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
</nav>

<aside>
  <!-- <div class="sidebar">
    <a href="box1.html">侧边栏项目1</a>
    <a href="#">侧边栏项目2</a>
    <a href="#">侧边栏项目3</a>
    <a href="#">侧边栏项目4</a>
    <a href="#">侧边栏项目1</a>
    <a href="#">侧边栏项目2</a>
    <a href="#">侧边栏项目3</a>
    <a href="#">侧边栏项目4</a>
    <a href="#">侧边栏项目1</a>
    <a href="#">侧边栏项目2</a>
    <a href="#">侧边栏项目3</a>
    <a href="#">侧边栏项目4</a>
  </div> -->
  </div>
</aside>
<div>
  <div class="content">
    <div class="article">
      <div class="slideshow-container">
        <div class="slide active">
          <img src="img/big1.webp" alt="图片1">
        </div>
        <div class="slide">
          <img src="img/big01.webp" alt="图片2">
        </div>
        <div class="slide">
          <img src="img/big02.webp" alt="图片3">
        </div>
        <div class="">
          <div>list-container</div>
    <!-- <aside> -->
           
          </div>
      </div>
    </div>

    <div class="article">
      <div class="article">
        <div class="slideshow-container">
          <div class="slide active">
            <img src="img/big1.webp" alt="图片1">
          </div>
          <div class="slide">
            <img src="img/big01.webp" alt="图片2">
          </div>
          <div class="slide">
            <img src="img/big02.webp" alt="图片3">
          </div>
          <div class="">
            <div>list-container</div> 
     <aside>
             
            </div>
        </div>
      </div>
      <h2>文章标题</h2>
      <p>这是一篇关于旅游的文章内容。</p>
      新冠疫情背景下韩国旅游业的发展研究


    </div>
  </div>
</div>
<footer>
  <div class="footer">
    <p>版权所有 &copy; 2022 旅游网站（风景图片）</p>
  </div>
</footer>
  <script>
    // JavaScript代码可以在这里添加

    // 轮播图逻辑
    var slides = document.querySelectorAll('.slide');
    var currentSlide = 0;

    function showSlide(n) {
      for (var i = 0; i < slides.length; i++) {
        slides[i].classList.remove('active');
      }
      slides[n].classList.add('active');
    }

    function nextSlide() {
      currentSlide++;
      if (currentSlide >= slides.length) {
        currentSlide = 0;
      }
      showSlide(currentSlide);
    }

    setInterval(nextSlide, 3000);
  </script>
  </footer>
</body>
</html>
